*{
    box-sizing: border-box;
    margin: 0%;
    padding: 0%;
}

html,body{
    height: 100%;
    width: 100%;
    background-image: url(./images/sign_in_wave.png);
    background-size: cover;
    
}

#Box111{
    height: 100%;
    width: 100%;
    background-color: rgba(252, 218, 174, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
}

#main-body{
    height: 50%;
    width: 23%;
    padding: 15px;
    background-color: rgba(250, 235, 215, 0.418);
    border-radius: 15px;
    border: 1px black solid;
    display: flex;
    flex-direction: column;
}

.smallBox{
    height: 20%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

input{
        padding: 10px;
        border: 1px black solid;
        border-radius: 10px;
        width: 191.6px;
        height: 30px;
        margin: none;
        padding: none;
        background-color: white;
        transition: .2s;
}

input:hover{
    border: 2px rgb(41, 201, 41) solid;
}

input:active{
    border: 2px rgb(41, 201, 41) solid;
    outline: 2px rgb(41, 201, 41);
}

button{
    border: 1px black solid;
    border-radius: 10px;
    width: 191.6px;
    height: 30px;
    background-color: rgb(83, 222, 176);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .2s;
}

button:hover{
    background-color: aqua;
}

#endBox{
    height: 20%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

img{
    height: 20%;
    width: auto;
    margin-bottom: 5px;
}
